<script setup>
import { defineProps } from 'vue'
import { formatTime } from "@/utils/formatTime"
import { Calendar, Delete } from '@element-plus/icons-vue'
import { deleteNoticeApi } from '@/service/update-notice'
import { storeToRefs } from 'pinia';
import { useCommonStore } from '@/store/commonStore'
const commonStore = useCommonStore();
const { isShowCover } = storeToRefs(commonStore)
defineProps({
    allNotices: {
        type: Array,
        default: () => []
    }
})
// 删除记录
async function handleDelete(row) {
    isShowCover.value = false;
    const res = await deleteNoticeApi(row.id);
    const code = res.data.code;
    if (code === 1) {
        // 1、显示删除提示
        // 2、刷新当前页面
        location.reload();
    }
} 
// 确定删除
const delBtnClick = () => {
    isShowCover.value = true
}
// 取消删除
const cancelBtnClick = () => {
    isShowCover.value = false
}
</script>

<template>
  <div class="history_notice">
    <el-table
        :data="allNotices"
        style="width: 95%;"
        border
        :header-cell-style="{ 
            background: '#f5f7f6',
            height: '50px', 
            textAlign: 'center' 
        }"
    >
        <el-table-column label="序号" width="60" type="index" />
        <el-table-column type="expand" label="内容详情" width="100">
            <template #default="props">
                <div m="4" class="detail">
                    <p m="t-0 b-2"><span>Id</span>: {{ props.row.id }}</p>
                    <p m="t-0 b-2"><span>系统管理员</span>: {{ props.row.name }}</p>
                    <p m="t-0 b-2"><span>工号</span>: {{ props.row.nameId }}</p>
                    <p m="t-0 b-2"><span>内容</span>: {{ props.row.content }}</p>
                    <p m="t-0 b-2"><span>时间</span>: {{ formatTime(props.row.time) }}</p>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="系统管理员" width="140">
            <template #default="scope">
                <div class="el_center">
                    <span>{{ scope.row.name }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="工号" width="140">
            <template #default="scope">
                <div>
                    <span>{{ scope.row.nameId }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="公告标题" width="120">
            <template #default="scope">
                <div>
                    <span>{{ scope.row.title }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="公告内容">
            <template #default="scope">
                <div class="aRowHid">
                    <span>{{ scope.row.content }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="发布时间" width="180">
        <template #default="scope">
            <div class="el_center">
                <el-icon><Calendar /></el-icon>
                <span>{{ formatTime(scope.row.time) }}</span>
            </div>
        </template>
        </el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
            <template #default="scope">
                <div class="el_center">
                    <el-popconfirm
                        width="220"
                        confirm-button-text="确定"
                        cancel-button-text="取消"
                        :icon="InfoFilled"
                        icon-color="#626AEF"
                        title="确定删除该记录吗？"
                        @confirm="handleDelete(scope.row)"
                        @cancel="cancelBtnClick"
                    >
                        <template #reference>
                            <el-link
                                @click="delBtnClick"
                                type="danger"
                            >
                                <el-icon><Delete /></el-icon>
                                <span>移除</span>
                            </el-link>
                        </template>
                    </el-popconfirm>
                </div>
            </template>
        </el-table-column>
    </el-table>
  </div>
</template>

<style scoped lang="less">
.el_center {
    display: flex; 
    align-items: center; 
    justify-content: center;
}
.aRowHid {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.el-table {
    margin: 20px auto;
}
.detail {
    background-color: #ecf5ff;
    p {
        padding: 10px;
        span {
            margin-right: 10px;
            font-weight: 600;
        }
    }
}
</style>